<template>
  <div class="infobox3">
    <div class="block1">页面设置</div>
    <div class="block2_main">
      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">内容设置</div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">标题</div>
          <div class="tip2">
            <div class="input">
              <el-input
                placeholder="请输入标题"
                size="mini"
                v-model="data.title"
              >
              </el-input>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">页面背景颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.pageColor"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">导航栏类型</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.type">
                <div class="flex wrap">
                  <el-radio :label="1">标题</el-radio>
                  <el-radio :label="2">搜索</el-radio>
                  <el-radio :label="3">沉浸</el-radio>
                  <el-radio :label="4">隐藏</el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.type !== 3">
          <div class="tip1">标题形式</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.titleType">
                <div class="flex">
                  <el-radio :label="1">文字</el-radio>
                  <el-radio :label="2">图片</el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex" v-if="data.titleType == 1 && data.type == 1">
          <div class="tip1">展示logo</div>
          <div class="tip2">
            <div
              class="uploadbox flex aitems jcenter"
              @click="uploadImg('data.titleText.logo')"
            >
              <!-- <input
                type="file"
                ref="uploadfile"
                @change="uploadImg('data.titleText.logo')"
                id="fileclass"
                class="fileclass"
                accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
              /> -->
              <div class="plusicon" v-if="!data.titleText.logo">
                <i class="el-icon-plus"></i>
              </div>
              <div class="uploadimg" v-if="data.titleText.logo">
                <img :src="data.titleText.logo" mode="aspectFit" alt="" />
              </div>
            </div>
            <div class="tip21">{{ data.titleText.tip }}</div>
          </div>
        </div>
        <div class="info2 flex" v-if="data.titleType == 2 && data.type !== 3">
          <div class="tip1">图片</div>
          <div class="tip2">
            <div
              class="uploadbox flex aitems jcenter"
              @click="uploadImg('data.titleImg.img')"
            >
              <!-- <input
                type="file"
                ref="uploadfile"
                @change="uploadImg('data.titleImg.img')"
                id="fileclass"
                class="fileclass"
                accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
              /> -->
              <div class="plusicon" v-if="!data.titleImg.img">
                <i class="el-icon-plus"></i>
              </div>
              <div class="uploadimg" v-if="data.titleImg.img">
                <img :src="data.titleImg.img" mode="aspectFit" alt="" />
              </div>
            </div>
            <div class="tip21">{{ data.titleImg.tip }}</div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.type == 1">
          <div class="tip1">标题位置</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.titlePin.type">
                <div class="flex">
                  <el-radio :label="1">居左</el-radio>
                  <el-radio :label="2">居中</el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.type !== 3">
          <div class="tip1">页面名称</div>
          <div class="tip2">
            <div class="input">
              <el-input
                placeholder="请输入页面名称"
                size="mini"
                v-model="data.titleText.text"
                :maxlength="data.titleText.maxLength"
              >
                <template slot="append"
                  >{{ data.titleText.text.length }}/{{
                    data.titleText.maxLength
                  }}</template
                >
              </el-input>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.type !== 3">
          <div class="tip1">标题颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.color"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex" v-if="data.type == 3">
          <div class="tip1">LOGO</div>
          <div class="tip2">
            <div
              class="uploadbox flex aitems jcenter"
              @click="uploadImg('data.platformLogo.img')"
            >
              <!-- <input
                type="file"
                ref="uploadfile"
                @change="uploadImg('data.platformLogo.img')"
                id="fileclass"
                class="fileclass"
                accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
              /> -->
              <div class="plusicon" v-if="!data.platformLogo.img">
                <i class="el-icon-plus"></i>
              </div>
              <div class="uploadimg" v-if="data.platformLogo.img">
                <img :src="data.platformLogo.img" mode="aspectFit" alt="" />
              </div>
            </div>
            <div class="tip21">{{ data.platformLogo.tip }}</div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.type == 3">
          <div class="tip1">名称</div>
          <div class="tip2">
            <div class="input">
              <el-input
                placeholder="请输入名称"
                size="mini"
                v-model="data.platformName.value"
                :maxlength="data.platformName.maxLength"
              >
                <template slot="append"
                  >{{ data.platformName.value.length }}/{{
                    data.platformName.maxLength
                  }}</template
                >
              </el-input>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.type == 3">
          <div class="tip1">简介说明</div>
          <div class="tip2">
            <div class="input">
              <el-input
                type="textarea"
                placeholder="请输入简介说明"
                size="mini"
                :rows="4"
                v-model="data.platformDesc.value"
                :maxlength="data.platformDesc.maxLength"
                show-word-limit
              >
                <!-- <template slot="append"
                  >{{ data.placeholder.text.length }}/{{
                    data.placeholder.maxLength
                  }}</template
                > -->
              </el-input>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.type == 2">
          <div class="tip1">搜索内容</div>
          <div class="tip2">
            <div class="input">
              <el-input
                placeholder="请输入搜索内容"
                size="mini"
                v-model="data.search.value"
                :maxlength="data.search.maxLength"
              >
                <template slot="append"
                  >{{ data.search.value.length }}/{{
                    data.search.maxLength
                  }}</template
                >
              </el-input>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.type !== 3">
          <div class="tip1">
            <div>颜色设置</div>
            <div v-if="data.bgType == 3" style="color: #9797a1">
              跟随店铺风格
            </div>
          </div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.bgType">
                <div class="flex">
                  <el-radio :label="1">纯色</el-radio>
                  <el-radio :label="2">背景图</el-radio>
                  <el-radio :label="3">默认</el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div
          class="info2 flex aitems"
          v-if="data.bgType == 1 && data.type !== 3"
        >
          <div class="tip1">导航背景颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.bgColor"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex" v-if="data.bgType == 2 && data.type !== 3">
          <div class="tip1">背景图片</div>
          <div class="tip2">
            <div
              class="uploadbox flex aitems jcenter"
              @click="uploadImg('data.bgImg.img')"
            >
              <!-- <input
                type="file"
                ref="uploadfile"
                @change="uploadImg('data.bgImg.img')"
                id="fileclass"
                class="fileclass"
                accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
              /> -->
              <div class="plusicon" v-if="!data.bgImg.img">
                <i class="el-icon-plus"></i>
              </div>
              <div class="uploadimg" v-if="data.bgImg.img">
                <img :src="data.bgImg.img" mode="aspectFit" alt="" />
              </div>
            </div>
            <div class="tip21">{{ data.bgImg.tip }}</div>
          </div>
        </div>
      </div>
      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">导航样式设置</div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">背景颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.footerbgColor"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">字体颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.footerColor"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">选中颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.selectColor"></el-color-picker>
            </div>
          </div>
        </div>
      </div>
      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">添加导航 (可拖动排序）</div>
        </div>
        <div class="info5">导航最多5个，图片建议宽度81*81px</div>
        <div class="info4">
          <draggable
            v-model="data.value"
            chosen-class="chosen"
            force-fallback="true"
            group="people"
            animation="500"
          >
            <transition-group>
              <div
                class="list"
                v-for="(item, index, key) in data.value"
                :key="index"
              >
                <div class="topbox1 flex aitems sb">
                  <div class="left flex aitems">
                    <i class="el-icon-s-grid" style="font-size: 20px"></i>
                    <div class="tip1">导航{{ index + 1 }}</div>
                  </div>
                  <div class="right" @click="imgDel(index)">删除</div>
                </div>
                <div class="centerbox1 flex aitems sb">
                  <div class="left">
                    <div class="flex aitems">
                      <div class="tip1">名称</div>
                      <div>
                        <el-input
                          size="mini"
                          v-model="item.name"
                          :maxlength="5"
                        >
                          <template slot="append"
                            >{{ item.name.length }}/{{ 5 }}</template
                          >
                        </el-input>
                      </div>
                    </div>
                    <div class="flex aitems link" @click="settingNav(index)">
                      <div class="tip1">链接</div>
                      <div class="tip2" v-if="item.urlType == 4">
                        请选择跳转链接 <i class="el-icon-arrow-right"></i>
                      </div>
                      <div class="tip2" v-if="item.urlType == 2">
                        导向小程序 <i class="el-icon-arrow-right"></i>
                      </div>
                      <!-- <div class="tip2" v-if="item.urlType == 3">
                        导向内容详情 <i class="el-icon-arrow-right"></i>
                      </div> -->
                      <div class="tip2" v-if="item.urlType == 1">
                        导向内部页面 <i class="el-icon-arrow-right"></i>
                      </div>
                      <div class="tip2" v-if="item.urlType == 3">
                        导向外部页面 <i class="el-icon-arrow-right"></i>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="right">
                      <!-- <input
                        type="file"
                        :ref="'uploadfile' + index"
                        @change="uploadImg(index)"
                        id="fileclass2"
                        class="fileclass"
                        accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                      /> -->
                      <div class="img">
                        <img :src="item.selectIcon" alt="" />
                      </div>
                      <div class="size">选中</div>
                      <div
                        class="btn"
                        @click="tabbarUploadImg(index, 'selectIcon')"
                      >
                        替换
                      </div>
                    </div>
                    <div class="right" style="margin-top: 4px">
                      <!-- <input
                        type="file"
                        :ref="'uploadfile' + index"
                        @change="uploadImg(index)"
                        id="fileclass2"
                        class="fileclass"
                        accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                      /> -->
                      <div class="img">
                        <img :src="item.icon" alt="" />
                      </div>
                      <div class="size">未选中</div>
                      <div class="btn" @click="tabbarUploadImg(index, 'icon')">
                        替换
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </transition-group>
          </draggable>
        </div>
        <div class="info3">
          <!-- <input
            type="file"
            ref="uploadfile"
            @change="uploadImg('add')"
            id="fileclass"
            class="fileclass"
            accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
          /> -->
          <el-button
            v-if="data.value.length < 5"
            type=""
            size="small"
            icon="el-icon-plus"
            style="width: 100%"
            @click="handleAdd"
            >添加导航</el-button
          >
        </div>
      </div>
      <!-- <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">分享信息(仅支持小程序)</div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">分享标题</div>
          <div class="tip2">
            <div class="input">
              <el-input
                placeholder="请输入分享标题"
                size="mini"
                v-model="data.share.title.text"
                :maxlength="data.share.title.maxLength"
              >
                <template slot="append"
                  >{{ data.share.title.text.length }}/{{
                    data.share.title.maxLength
                  }}</template
                >
              </el-input>
            </div>
          </div>
        </div>
        <div class="info2 flex">
          <div class="tip1">分享图片</div>
          <div class="tip2">
            <div class="uploadbox flex aitems jcenter">
              <input
                type="file"
                ref="uploadfile"
                @change="uploadImg('data.share.img.src')"
                id="fileclass"
                class="fileclass"
                accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
              />
              <div class="plusicon" v-if="!data.share.img.src">
                <i class="el-icon-plus"></i>
              </div>
              <div class="uploadimg" v-if="data.share.img.src">
                <img :src="data.share.img.src" mode="aspectFit" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
// import { data } from "../../data/data";
import { uploads } from "@/api/upload";
export default {
  props: ["data", "messageInfo"],
  components: {},
  data() {
    return {
      // data,
      uploadStr: "",
      tabbarUploadImgIndex: null,
      tabbarUploadImgKey: "",
    };
  },
  watch: {
    messageInfo(sendData) {
      console.log("-----------------------------------");
      console.log(sendData);
      if (sendData.type == "upload" && sendData.menuStr == "pageSetting") {
        if (this.uploadStr) {
          let key = this.uploadStr.split(".");
          this[key[0]][key[1]][key[2]] = sendData.sendData.ids;
          this.uploadStr = "";
          console.log(this.data);
        }
        if (this.tabbarUploadImgKey) {
          this.data.value[this.tabbarUploadImgIndex][this.tabbarUploadImgKey] =
            sendData.sendData.ids;
          this.tabbarUploadImgKey = "";
        }
      }
      if (sendData.type == "pageLink" && sendData.menuStr == "pageSetting") {
        if (this.tabbarUploadImgIndex !== null) {
          this.data.value[this.tabbarUploadImgIndex].urlType =
            sendData.sendData.targetType;
          if (sendData.sendData.targetType == 1) {
            this.data.value[this.tabbarUploadImgIndex].path =
              sendData.sendData.url;
            this.data.value[this.tabbarUploadImgIndex].params =
              sendData.sendData.params;
          }
          if (sendData.sendData.targetType == 2) {
            this.data.value[this.tabbarUploadImgIndex].miniappid =
              sendData.sendData.appId;
            this.data.value[this.tabbarUploadImgIndex].minipath =
              sendData.sendData.miniappurl;
          }
          if (sendData.sendData.targetType == 3) {
            this.data.value[this.tabbarUploadImgIndex].url =
              sendData.sendData.weburl;
          }
        }
      }
    },
  },
  mounted() {},
  methods: {
    handleAdd() {
      this.data.value.push({
        icon: "", //图片链接
        selectIcon: "", //图片链接
        name: "导航名称",
        urlType: 4, //1无跳转 2小程序 3内容详情 4功能页面 5外部页面
        miniappid: "", //2小程序APPID
        minipath: "", //2小程序路径
        path: "", //4内部页面路径
        params: "", //4携带参数
        url: "", //5外部页面
      });
    },
    uploadImg(str) {
      this.uploadStr = str;
      this.$store.state.menuStr = "pageSetting";
      window.parent.postMessage(
        {
          type: "upload",
          options: {
            limit: 1,
          },
        },
        "*"
      );
    },
    tabbarUploadImg(index, key) {
      this.tabbarUploadImgIndex = index;
      this.tabbarUploadImgKey = key;
      this.$store.state.menuStr = "pageSetting";
      window.parent.postMessage(
        {
          type: "upload",
          options: {
            limit: 1,
          },
        },
        "*"
      );
    },
    imgDel(index) {
      this.data.value.splice(index, 1);
    },
    settingNav(index) {
      this.tabbarUploadImgIndex = index;
      this.$store.state.menuStr = "pageSetting";
      let data = {
        targetType: this.data.value[index].urlType,
        miniappurl: this.data.value[index].minipath,
        appId: this.data.value[index].miniappid,
        url: this.data.value[index].path,
        params: this.data.value[index].params,
        weburl: this.data.value[index].url,
      };
      window.parent.postMessage(
        {
          type: "pageLink",
          options: {
            // limit: 1,
            info: data,
          },
        },
        "*"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  .infobox3 {
    width: 340px;
    min-width: 340px;
    height: 100%;
    background: #f8f9fa;
    overflow-y: hidden;
    padding: 0 0px 10px;
    .block1 {
      font-size: 14px;
      font-weight: 600;
      color: #595961;
      padding: 9px 16px 9px 12px;
    }
    .block2_main {
      padding: 0 0 10px 0;
      height: calc(100% - 30px);
      overflow-y: scroll;
      .block2 {
        padding: 0 0 0 10px;
        .info1 {
          padding: 9px 16px 9px 12px;
          font-weight: 600;
          background: #eef0f4;
          border-radius: 5px;
          font-size: 12px;
          font-weight: 600;
          color: #595961;
          .tip1 {
          }
        }
        .info2 {
          padding: 10px;
          .tip1 {
            font-size: 12px;
            color: #595961;
            margin: 0 10px 0 0;
            width: 80px;
          }
          .tip2 {
            width: calc(100% - 80px - 10px);
            .tip21 {
              color: #9797a1;
              font-size: 12px;
              margin: 5px 0 0;
            }
            .uploadbox {
              cursor: pointer;
              width: 120px;
              height: 120px;
              background: #fff;
              transition: all 0.3s;
              border-radius: 4px;
              position: relative;
              overflow: hidden;
              .plusicon {
              }
              .uploadimg {
                width: 100%;
                height: 100%;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
            }
            .uploadbox:hover {
              box-shadow: 0 0 10px 0 #ccc;
            }
          }
          .input {
          }
        }
        .info3 {
          padding: 10px 0;
          position: relative;
        }
        .info4 {
          .list {
            padding: 15px 10px 20px;
            border-radius: 4px;
            margin-top: 10px;
            // min-height: 100px;
            background: #f0f2f5;
            .topbox1 {
              cursor: pointer;
              .left {
                color: #595961;
                font-weight: 600;
                font-size: 14px;
                i {
                }
                .tip1 {
                  margin-left: 5px;
                  position: relative;
                  top: -1px;
                }
              }
              .right {
                color: #9797a1;
                font-size: 12px;
              }
              .right:hover {
                color: #595961;
              }
            }
            .centerbox1 {
              margin-top: 10px;
              .left {
                width: calc(100% - 80px);
                cursor: pointer;
                .tip1 {
                  color: #595961;
                  font-size: 12px;
                  min-width: 50px;
                }
                .tip2 {
                  margin-left: 10px;
                  word-wrap: break-word;
                  font-size: 12px;
                  letter-spacing: 0;
                  color: #2589ff !important;
                }
                .link {
                  margin-top: 10px;
                }
              }
              .right {
                cursor: pointer;
                position: relative;
                .img {
                  img {
                    width: 70px;
                    height: 70px;
                    -o-object-fit: cover;
                    object-fit: cover;
                    border-radius: 4px;
                  }
                }
                .size {
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  background: rgba(0, 0, 0, 0.6);
                  z-index: 1;
                  width: 100%;
                  height: 26px;
                  text-align: center;
                  font-family: PingFangSC-Semibold;
                  font-size: 12px;
                  color: #fff;
                  line-height: 26px;
                  letter-spacing: 0;
                  border-bottom-left-radius: 4px;
                  border-bottom-right-radius: 4px;
                }
                .btn {
                  width: 60px;
                  height: 30px;
                  font-size: 12px;
                  text-align: center;
                  position: absolute;
                  top: 0;
                  right: 0;
                  left: 0;
                  bottom: 0;
                  margin: auto;
                  display: none;
                  z-index: 2;
                  background: #fff;
                  border-radius: 4px;
                  font-weight: 600;
                  color: #595961;
                  line-height: 30px;
                }
              }
              .right:hover .btn {
                display: block;
              }
            }
          }
        }

        .info5 {
          color: #9797a1;
          font-size: 14px;
          padding: 10px;
        }
      }
    }
  }
}
.fileclass {
  position: absolute;
  width: 100%;
  bottom: 0;
  top: 0;
  z-index: 99;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}
</style>
